import React from 'react'
import {Image} from 'react-native'
import {createBottomTabNavigator} from 'react-navigation'

import Tools from '../utils/tools'
import Theme from '../config/theme'

import C2c from '../views/c2c'
import Order from '../views/order'
import My from '../views/my'

const tabbarArr = {
  C2c: 'C2c',
  Order: '订单',
  My: '我的'
}

export default createBottomTabNavigator({
    C2c: {
      screen: C2c
    },
    Order: {
      screen: Order
    },
    My: {
      screen: My
    },
  },
  {
    // 定义选项卡顺序
    order: ['C2c', 'Order', 'My'],
    // 第一次加载时初始选项卡路由
    initialRouteName: "C2c",
    // headerMode: "screen",
    lazy: true,
    swipeEnabled: true,
    // 是否在更改选项卡时动画
    animationEnabled: true,
    backBehavior: "none",
    tabBarOptions: {
      activeTintColor: Theme.mainColor,
      inactiveTintColor: "#CAC9D2",
      showIcon: true,
      showLabel: true,
      style: {
        height: Tools.size(49),
        backgroundColor: "#fff",
      },
      labelStyle: {
        fontSize: Tools.size(10),
        padding: 0,
        marginTop: Tools.isIos() ? Tools.size(-3) : Tools.size(3)
      },
      indicatorStyle: {
        opacity: 0
      },
      tabStyle: {
        padding: 0,
        margin: 0
      }
    },
    defaultNavigationOptions: ({navigation}) => ({
      tabBarLabel: tabbarArr[navigation.state.routeName],
      tabBarIcon: ({focused}) => {
        const {routeName} = navigation.state;
        let iconName;
        switch (routeName) {
          case 'C2c':
            iconName = focused ? require("../images/tabbar/tab_1_h.png") : require("../images/tabbar/tab_1.png")
            return (<Image resizeMode="contain" source={iconName} style={{
              width: Tools.size(18.5),
              height: Tools.size(18.5),
              padding: 0,
              margin: 0
            }}/>);
            break;
          case 'Order':
            iconName = focused ? require("../images/tabbar/tab_2_h.png") : require("../images/tabbar/tab_2.png")
            return (<Image resizeMode="contain" source={iconName} style={{
              width: Tools.size(18.5),
              height: Tools.size(18.5),
              padding: 0,
              margin: 0
            }}/>);
            break;
          case 'My':
            iconName = focused ? require("../images/tabbar/tab_3_h.png") : require("../images/tabbar/tab_3.png")
            return (<Image resizeMode="contain" source={iconName} style={{
              width: Tools.size(18.5),
              height: Tools.size(18.5),
              padding: 0,
              margin: 0
            }}/>);
            break;
        }
      },
    }),
  }
);

